<template>
    <div id="cooperate">
        <div class="right">
            <PageTitle :data="titleData">
                    <OperateCard :data="data1"></OperateCard>
                    <OperateCard :data="data2"></OperateCard>
                    <OperateCard :data="data3"></OperateCard>
            </PageTitle>
            <div class="container flex-1">
                <TableContainer :columns="columns" :tableData="tableData" :total="tableData.length" title="订单列表"
                    :showIndex="true" :showCheckbox="true">
                    <template #search>
                        <SearchInput placeholder="搜索..." @search="handleSearch" />
                    </template>
                    <template #buttons>
                        <Icon v-if="tabIndex == 0" icon="icon-daoru" color="gray-line" tiptxt="重置"></Icon>
                    </template>
                    <template v-slot:actions="scope">
                        <div style="color: blue;">查看</div>
                    </template>
                </TableContainer>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed,onBeforeUnmount} from 'vue';
import { useRouter } from 'vue-router';
import Icon from "@/components/common/Icon.vue";
import Select from '@/components/common/Select.vue';
import TableContainer from '@/components/common/TableContainer.vue';
import OperateCard from '@/components/common/OperateCard.vue';
import PageTitle from '@/components/common/PageTitle.vue';
import SearchInput from '@/components/common/SearchInput.vue';
const router = useRouter();

const tabIndex = ref(0)
const titleData = ref({
  title:'合作管理',
  items:[
    {title:'数据总数',value:'203',unit:'条'},
    {title:'更新时间',value:'2025-05-03'}
  ]
})
const data1 = ref({title:'导出数据'})
const data2 = ref({title:'批量操作'})
const data3 = ref({title:'新增合作单位'})
const columns1 = [
    { prop: 'cooperate', label: '合作单位名称' },
    { prop: 'chairMan', label: '负责人'},
    { prop: 'contact', label: '联系方式' },
    { prop: 'code', label: '推荐码' },
    { prop: 'QRcode', label: '推荐二维码'},
    { prop: 'actions', label: '操作' },
];

const columns = ref(columns1)

const tableData = ref([
    { cooperate: "213445", chairMan: "ltj", contact: "10086", code: "1412", QRcode: "2025.07.11"},
    { cooperate: "213445", chairMan: "ltj", contact: "10086", code: "1412", QRcode: "2025.07.11"},
    { cooperate: "213445", chairMan: "ltj", contact: "10086", code: "1412", QRcode: "2025.07.11"},
    { cooperate: "213445", chairMan: "ltj", contact: "10086", code: "1412", QRcode: "2025.07.11"},
    { cooperate: "213445", chairMan: "ltj", contact: "10086", code: "1412", QRcode: "2025.07.11"},
]);

const filterObj = ref({
    status: '',
    type: ''
});
const options = ref([
    { label: "选项1", value: "选项1" },
    { label: "选项2", value: "选项2" },
    { label: "选项3", value: "选项3" },
]);


const isUnit = computed(() => {
    return false
})

const onTabClick = (val) => {
    tabIndex.value = val

    if (val == 1) {
        columns.value = columns2
    } else {
        columns.value = columns1
    }
}

const handleSearch = () => { }


</script>

<style scoped lang="less">
#cooperate {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 8px;

    .left {
        width: 388px;
        background-color: #FFFFFF;
        border-radius: 32px;
    }

    .right {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }

    .container {
        background-color: #FFFFFF;
        height: 100%;
        border-radius: 40px;
        padding: 16px;
        padding-top: 0px;
    }
    .el-button {

    }
}
</style>
